<template>
  <div>
    <div class="info_box" v-if="info != null">
      <!-- <div class="line"></div> -->
      <div class="title">上次储值快捷方式</div>
      <ul>
        <li v-for="(item, index) in info" :key="index" class="content_box" @click="itemClick(index)">
          <div>
            <img src="../../../assets/img/stored/pay_type/alipay.png" alt="" v-if="info != null && item.paytype == 21">
            <img src="../../../assets/img/stored/pay_type/mycard.png" alt="" v-else-if="info != null && item.paytype == 4">
            <img src="../../../assets/img/stored/pay_type/paypal.png" alt="" v-else-if="info != null && item.paytype == 5">
            <img src="../../../assets/img/stored/pay_type/UNIPin.png" alt="" v-else-if="info != null && item.paytype == 51">
            <img src="../../../assets/img/stored/pay_type/gash.png" alt="" v-else-if="info != null && item.paytype == 6">
            <img src="../../../assets/img/stored/pay_type/Razer_Gold.png" alt="" v-else-if="info != null && item.paytype == 7">
            <img src="../../../assets/img/stored/pay_type/wechat.png" alt="" v-else-if="info != null && item.paytype == 8">
          </div>
          <div>
            <span v-if="info != null && item.paytype == 21">支付宝支付</span>
            <span v-else-if="info != null && item.paytype == 4">mycard</span>
            <span v-else-if="info != null && item.paytype == 5">paypal</span>
            <span v-else-if="info != null && item.paytype == 51">UniPin</span>
            <span v-else-if="info != null && item.paytype == 6">GASH</span>
            <span v-else-if="info != null && item.paytype == 7">Razer Gold</span>
            <span v-else-if="info != null && item.paytype == 8">微信支付</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    itemClick(index) {
      this.$emit('apply-click',this.info[index].paytype)
    }
  },
}
</script>

<style scoped>
.info_box {
  background: #fff;
  border-radius: .266667rem;
  box-sizing: border-box;
  width: 9.146667rem;
  height: auto;
  margin: .266667rem .426667rem;
  padding: .533333rem .266667rem;
}

.title {
  /* padding: 0 .426667rem; */
  font-size: .426667rem;
  color: #222222;
  font-weight: 700;
  line-height: .6rem;
  /* margin: .4rem 0 0 0; */
}

.line {
  width: 10rem;
  height: .213333rem;
  background: #f2f3f7;
}

.content_box {
  box-sizing: border-box;
  width: 8.613333rem;
  height: 1.333333rem;
  border: .04rem solid #cccccc;
  border-radius: .2rem;
  margin: .266667rem auto;
  display: flex;
  align-items: center;
  font-size: .4rem;
  color: #222222;
  padding-left: .266667rem;
}
.content_box img {
  width: .8rem;
  height: .8rem;
  margin-right: .266667rem;
}
</style>